<template>
  <body>
    <div class="product-page">
      <h1 class="page-title">
        商品展示
      </h1>
      <div class="products-container">
        <!-- 商品卡片展示 -->
        <div
          v-for="(product, index) in products"
          :key="index"
          class="product-card"
        >
          <img
            :src="product.iimage"
            class="product-image"
            alt="商品图片"
          >
          <div class="product-info">
            <h2 class="product-name">
              {{ product.iname }}
            </h2>
            <p class="product-price">
              ¥{{ product.price }}
            </p>
            <p class="product-description">
              {{ product.idescribe }}
            </p>
            <button
              class="view-button"
              @click="viewProduct(product)"
            >
              查看详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ProductPage',
  data () {
    return {
      // 商品数据
      products: [
        {
          name: '二手自行车',
          price: 500,
          description: '一辆8成新的二手山地自行车，适合城市骑行。',
          image: '../../assets/bike.png',
          id: 1
        },
        {
          name: '二手手机',
          price: 1200,
          description: 'iPhone 12，成色良好，轻微划痕。',
          image: '../../assets/phone.png',
          id: 2
        },
        {
          name: '二手书《活着》',
          price: 40,
          description: '经典文学作品，书籍完好无损。',
          image: '../../assets/book.png',
          id: 3
        },
        {
          name: '二手电视机',
          price: 800,
          description: '42寸LED电视，使用约两年，功能完好。',
          image: '../../assets/tv.png',
          id: 4
        }
      ]
    }
  },
  async mounted () {
    try {
      // 获取用户交易数据
      const response = await axios.get('http://localhost:8080/items/list', {

      })
      this.products = response.data.data
    } catch (error) {
      console.error('Error fetching transactions:', error)
    }
  },
  methods: {
    // 查看商品详情
    viewProduct (product) {
      console.log('查看商品详情:', product)
      // 在此可以通过路由跳转到商品详情页面，传递商品ID
      this.$router.push({ name: 'ProductDetail', params: { id: product.id } })
    }
  }
}
</script>

  <style scoped>
  .product-page {
    background: linear-gradient(to bottom, #A8D08D, #6D9F4D);
    color: #2C3E50;
    font-family: 'Arial', sans-serif;
    padding: 20px;
    height: 600px;
  }

  .page-title {
    font-size: 36px;
    text-align: center;
    color: #388E3C;
    margin-bottom: 20px;
  }

  .products-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
  }

  .product-card {
    background-color: #F4F9F4;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
  }

  .product-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .product-info {
    margin-top: 10px;
  }

  .product-name {
    font-size: 20px;
    color: #388E3C;
  }

  .product-price {
    font-size: 18px;
    color: #FF5722;
    margin: 10px 0;
  }

  .product-description {
    font-size: 14px;
    color: #2C3E50;
  }

  .view-button {
    background-color: #388E3C;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .view-button:hover {
    background-color: #2C6A2F;
  }
  </style>
